<template>
  <a-spin :loading="loading" tip="正在加载。。。" style="width: 100%">
    <div class="canteiner">
      <div
        class="htmlbox"
        v-html="printList[choiceIndex] ? printList[choiceIndex].htmlStr : ''"
        :style="{
          width: direction === 1 ? '555px' : '802px',
          height: direction === 1 ? '802px' : '555px'
        }"
      />
      <div
        class="userBox"
        :style="{
          height: direction === 1 ? '842px' : '595px'
        }"
      >
        <div class="title">已选择人员：</div>
        <div
          v-for="(item, index) in printList"
          :key="item.id"
          @click="choiceIndex = index"
          :class="choiceIndex === index ? 'choice' : 'notChoice'"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- <div class="buts">
      <a-space>
        <a-button @click="emit('back')">上一步</a-button>
        <a-button
          @click="emit('nextStep')"
          type="primary"
          v-show="isApprove === 1"
          >下一步</a-button
        >
        <a-button type="primary" @click="toPrint" v-show="isApprove === 2"
          >批量打印</a-button
        >
        <a-button type="primary" @click="download" v-show="isApprove === 2"
          >下载</a-button
        >
      </a-space>
    </div> -->
    <div>
      <div id=".printEle" v-html="printStr" />
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { ChangeInternshipProofTemplate } from '@/apis/management/human/baseSetting/certificateSetting';
import { htmlStrToPdf } from '@/utils/printAndPdf';
import printJS from 'print-js';
let emit = defineEmits(['back', 'nextStep']);
let choiceIndex = ref(0);
let props = withDefaults(
  defineProps<{
    direction?: number;
    isApprove: 1 | 2; // 是否审批
  }>(),
  {
    direction: 1
  }
);

interface Tuser {
  id: number;
  name: string;
  htmlStr?: string;
}

let printStr = ref('');
let loading = ref(false);
let toPrint = async () => {
  loading.value = true;
  printJS({
    printable: URL.createObjectURL(
      await htmlStrToPdf(
        printList.value.map(({ htmlStr }) => htmlStr + ''),
        props.direction === 1 ? 595 : 842,
        props.direction === 1 ? 842 : 595,
        20
      )
    )
  });
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
let download = async () => {
  loading.value = true;
  let url = URL.createObjectURL(
    await htmlStrToPdf(
      printList.value.map(({ htmlStr }) => htmlStr + ''),
      props.direction === 1 ? 595 : 842,
      props.direction === 1 ? 842 : 595,
      20
    )
  );
  let link = document.createElement('a');
  link.href = url;
  link.download = '证明.pdf';
  link.click();
  loading.value = false;
};

let printList = ref<Tuser[]>([]);
defineExpose({
  async setUsers(userList: Tuser[], templateId: number) {
    let list = await Promise.all(
      userList.map(({ id }) => {
        return ChangeInternshipProofTemplate({ id: templateId, ownerId: id });
      })
    );
    printList.value = userList.map((item, index) => {
      return {
        ...item,
        htmlStr: list[index].text + ''
      };
    });
    choiceIndex.value = 0;
  },
  toPrint,
  download
});
</script>

<style scoped lang="less">
.canteiner {
  display: flex;
  justify-content: center;
  .htmlbox {
    width: 555px;
    padding: 20px;
    height: 802px;
    word-wrap: break-word;
    box-shadow: 0px 0px 10px var(--color-neutral-8);
  }
  .userBox {
    width: 180px;
    margin-left: 20px;
    height: 842px;
    word-wrap: break-word;
    overflow-y: hidden;

    box-shadow: 0px 0px 10px var(--color-neutral-8);
    .title {
      padding: 10px 15px;
      font-weight: 600;
    }
    .notChoice {
      padding: 10px 15px;
      cursor: pointer;
    }

    .notChoice:hover {
      padding: 10px 15px;
      background: rgb(var(--arcoblue-2));
      color: rgb(var(--arcoblue-6));
    }
    .choice {
      padding: 8px 10px;
      cursor: pointer;
      background: rgb(var(--arcoblue-2));
      color: rgb(var(--arcoblue-6));
    }
  }
}

.buts {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}
</style>
